<template>
    <!-- 三年级发布学习计划也 -->
    <div id="ReleaseProcess">
        <!-- 请输入学习计划名称 -->
        <div class="ProcessName">
            <p class="chinese must">请输入学习计划名称</p>
            <el-input id="ProcessNameIpt" :class="[inputKey?'shake':'']" @focus="delShakei" v-model="input" placeholder="请输入学习计划名称"></el-input>
        </div>
        <!-- 请选择学习计划指定年级 -->
        <div class="ProcessGread">
            <p class="chinese must">请选择学习计划指定年级</p>
            <el-select id="ProcessGreadIpt" :class="[valueKey?'shake':'']" @focus="delShakev" v-model="value" placeholder="请选择学习计划指定年级">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
        </div>
        <!-- 学习计划的内容，学习计划描述必填，学习计划的小题选填 -->
        <div class="ProcessContent">
            <div class="editorContent" v-for="item in editors" :key="item.id">
                <h1 :class="[item.editorKey=='1' ? 'must': '' ]">##{{item.editorKey}}</h1>
                <div class="editorVessles">

                    <!-- 学习计划 -->
                    <div class="editorLeft editorDiv">
                        <p class="chinese must">填写学习计划</p>
                        <div class="processEditor" :id="item.id"></div>
                        <!-- 添加附件 -->
                    </div>

                    <!-- 学习小题 -->
                    <div class="editorRight editorDiv">
                        <p class="chinese">填写学习计划小题</p>
                        <div class="processEditor" :id="item.soluId"></div>
                        <!-- 添加附件 -->
                    </div>
                    
                </div>
            </div>
        </div>
        <!-- 添加计划按钮，点击添加学习计划 -->
        <div class="clickAdd" @click="editorKeyM">
            <i class="el-icon-plus"></i>添加学习计划
        </div>
        <!-- 发布或保存草稿 -->
        <div class="sendOdraft">
            <button class="send btn" @click="send">发布</button>
            <button class="draft btn">保存草稿</button>
        </div>
    </div>
</template>

<script>

//富文本
import Editor from './Editor/Editor.js'
export default {
    name:'ReleaseProcess',
    data(){
        return {
            // 请输入学习计划名称
            input:'',
            inputKey:false,
            // 选择学习计划指定年级
            options: [{
                value: '大一',
                label: '大一'
            }, 
            {
                value: '大二',
                label: '大二'
            }, 
            {
                value: '大三',
                label: '大三'
            }],
            // 请选择学习计划指定年级
            value: '',
            valueKey:false,
            //富文本
            editorKey:1,
            editorName:`ProcessContent1`,
            soluId:'soludId1',

            editors:[
                {
                    editorKey:1,
                    id:'ProcessContent1',
                    soluId:'soludId1',
                    ProccessContentValue:'',
                    soluIdValue:'',
                },
            ]
        }
    },
    mounted(){
        //最初将富文本添加到页面上
        Editor.creates('editor1',document.getElementById(`${this.editorName}`),this.editors[this.editors.length-1],'1')
        Editor.creates('solud1',document.getElementById(`${this.soluId}`),this.editors[this.editors.length-1],'2')
    },
    watch:{
        editors(){
            console.log("改变了");
        },
        $route: {
            handler:function(){
                this.$nextTick(function(){  //页面加载完成后执行
                    console.log("页面加载完成");
                })
            },
            // 深度观察监听
            deep: true
        }
    },
    methods:{
        //点击添加按钮添加学习计划
        editorKeyM(){
            this.editorKey++
            this.editorName=`ProcessContent${this.editorKey}`
            this.soluId=`soludId${this.editorKey}`
            this.editors.push({
                editorKey:this.editorKey,
                id:this.editorName,
                soluId:this.soluId
            })
            setTimeout(()=>{
                Editor.creates(this.editorName,document.getElementById(`${this.editorName}`),this.editors[this.editors.length-1],'1')
                Editor.creates(this.soluId,document.getElementById(`${this.soluId}`),this.editors[this.editors.length-1],'2')
            },100)
        },
        //发布学习计划
        send(){
            let message=this.editors[0].ProccessContentValue
            let ProcessContent1=document.getElementById('ProcessContent1')
            if(message==""){
                console.log("输入内容不能为空");
                ProcessContent1.className="shake"
                // this.open()
            }
            //判断学习计划名称
            if(this.input==""){
                this.inputKey=true
            }
            //判断学习计划指定年级
            if(this.value==""){
                this.valueKey=true
            }
        },
        // 取消抖动
        delShakei(){
            this.inputKey=false
        },
        delShakev(){
            this.valueKey=false
        },
        open() {
            const h = this.$createElement;
            this.$msgbox({
                title: '消息',
                message: h('p', null, [
                    h('span', null, '内容可以是 '),
                    h('i', { style: 'color: teal' }, 'VNode')
                ]),
                showCancelButton: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                beforeClose: (action, instance, done) => {
                    if (action === 'confirm') {
                    instance.confirmButtonLoading = true;
                    instance.confirmButtonText = '执行中...';
                    setTimeout(() => {
                        done();
                        setTimeout(() => {
                        instance.confirmButtonLoading = false;
                        }, 300);
                    }, 3000);
                    } else {
                    done();
                    }
                }
            }).then(action => {
                this.$message({
                    type: 'info',
                    message: 'action: ' + action
                });
            });
        }
    },
    components:{
        // Editor,
    }
}
</script>

<style lang="less" scoped>
    .chinese{
        margin: 10px 0;
        font-size: 16px;
        color: rgb(105, 102, 103);
    }
    .must{
        &::after{
            content: "*";
            font-weight: 600;
            color: red;
            font-size: 16px;
        }
    }
    .clickAdd{
        margin: 10px 0;
        color: rgba(64, 158, 255,1);
        width: 130px;
        text-align:center;
        border-radius: 5px;
        cursor: pointer;
        height: 40px;
        line-height: 40px;
        background-color: rgba(64, 158, 255,.3);
        margin-left: 20px;
    }
    .editorContent{
        margin: 10px 0;
        .editorVessles{
            display: flex;
            flex-direction: row;
            padding-left: 20px;
            @media (max-width:800px) {
                flex-direction: column;
            }
            .editorDiv{
                flex: 1;
            }
        }
    }
    //发布保存草稿
    .sendOdraft{
        width: 100%;
        height: 40px;
        margin: 20px 0;
        display: flex;
        justify-content:center;
        .btn{
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            margin: 0 10px;
            border: none;
            color: #ffffff;
            border-radius: 5px;
            cursor: pointer;
        }
        .send{
            background-color: rgba(64, 158, 255,1);
            &:active{
                background-color: rgba(64, 158, 255,.8);
            }
        }
        .draft{
            background-color: sandybrown;
            &:active{
                background-color: rgba(244, 164, 96,.8);
            }
        }
    }
    .shake{
        // animation-play-state: running !important;
        // animation-name: shake !important;
        // animation-duration: 100ms !important;
        // animation-timing-function: ease-in-out !important;
        // animation-iteration-count: infinite !important;
        box-shadow: 0 0 5px 1px red !important;
    }
    @keyframes shake {
    2% {
        transform: translate(1.5px, -1.5px) rotate(-0.5deg);
    }
    4% {
        transform: translate(-1.5px, -0.5px) rotate(1.5deg);
    }
    6% {
        transform: translate(1.5px, 2.5px) rotate(-0.5deg);
    }
    8% {
        transform: translate(2.5px, 0.5px) rotate(-0.5deg);
    }
    10% {
        transform: translate(2.5px, -0.5px) rotate(-0.5deg);
    }
    12% {
        transform: translate(-0.5px, 1.5px) rotate(1.5deg);
    }
    14% {
        transform: translate(2.5px, -0.5px) rotate(1.5deg);
    }
    16% {
        transform: translate(0.5px, -1.5px) rotate(0.5deg);
    }
    18% {
        transform: translate(2.5px, 2.5px) rotate(-0.5deg);
    }
    20% {
        transform: translate(1.5px, -0.5px) rotate(1.5deg);
    }
    22% {
        transform: translate(-0.5px, 1.5px) rotate(0.5deg);
    }
    24% {
        transform: translate(-1.5px, 1.5px) rotate(0.5deg);
    }
    26% {
        transform: translate(2.5px, 0.5px) rotate(1.5deg);
    }
    28% {
        transform: translate(-0.5px, -0.5px) rotate(0.5deg);
    }
    30% {
        transform: translate(0.5px, -0.5px) rotate(0.5deg);
    }
    32% {
        transform: translate(1.5px, -0.5px) rotate(1.5deg);
    }
    34% {
        transform: translate(1.5px, 0.5px) rotate(-0.5deg);
    }
    36% {
        transform: translate(0.5px, 2.5px) rotate(0.5deg);
    }
    38% {
        transform: translate(-1.5px, -0.5px) rotate(0.5deg);
    }
    40% {
        transform: translate(0.5px, -0.5px) rotate(0.5deg);
    }
    42% {
        transform: translate(0.5px, -0.5px) rotate(1.5deg);
    }
    44% {
        transform: translate(-1.5px, 0.5px) rotate(1.5deg);
    }
    46% {
        transform: translate(-1.5px, -0.5px) rotate(-0.5deg);
    }
    48% {
        transform: translate(-1.5px, -0.5px) rotate(-0.5deg);
    }
    50% {
        transform: translate(-0.5px, -0.5px) rotate(0.5deg);
    }
    52% {
        transform: translate(-1.5px, 0.5px) rotate(1.5deg);
    }
    54% {
        transform: translate(2.5px, 0.5px) rotate(-0.5deg);
    }
    56% {
        transform: translate(1.5px, 2.5px) rotate(1.5deg);
    }
    58% {
        transform: translate(0.5px, 1.5px) rotate(1.5deg);
    }
    60% {
        transform: translate(-1.5px, -1.5px) rotate(1.5deg);
    }
    62% {
        transform: translate(0.5px, 1.5px) rotate(-0.5deg);
    }
    64% {
        transform: translate(1.5px, 2.5px) rotate(1.5deg);
    }
    66% {
        transform: translate(1.5px, -0.5px) rotate(1.5deg);
    }
    68% {
        transform: translate(-1.5px, 1.5px) rotate(0.5deg);
    }
    70% {
        transform: translate(0.5px, 0.5px) rotate(-0.5deg);
    }
    72% {
        transform: translate(-0.5px, -0.5px) rotate(0.5deg);
    }
    74% {
        transform: translate(0.5px, -1.5px) rotate(0.5deg);
    }
    76% {
        transform: translate(-0.5px, 1.5px) rotate(0.5deg);
    }
    78% {
        transform: translate(1.5px, -1.5px) rotate(-0.5deg);
    }
    80% {
        transform: translate(-1.5px, -0.5px) rotate(0.5deg);
    }
    82% {
        transform: translate(0.5px, -0.5px) rotate(0.5deg);
    }
    84% {
        transform: translate(2.5px, 2.5px) rotate(1.5deg);
    }
    86% {
        transform: translate(2.5px, -0.5px) rotate(1.5deg);
    }
    88% {
        transform: translate(0.5px, 0.5px) rotate(-0.5deg);
    }
    90% {
        transform: translate(-0.5px, -1.5px) rotate(-0.5deg);
    }
    92% {
        transform: translate(2.5px, 1.5px) rotate(-0.5deg);
    }
    94% {
        transform: translate(2.5px, -1.5px) rotate(-0.5deg);
    }
    96% {
        transform: translate(2.5px, 2.5px) rotate(0.5deg);
    }
    98% {
        transform: translate(2.5px, -0.5px) rotate(0.5deg);
    }
    0%,
    100% {
        transform: translate(0, 0) rotate(0);
    }
}
</style>